// webpack的配置文件：生产模式
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const EslintWebpackPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
    // 一个页面对应一个入口文件
    entry: {
        'index': './src/index.js',// 首页入口文件
        'list': './src/list.js',// 列表页入口文件
        'add': './src/add.js',// 添加商品入口文件
        'login': './src/login.js',// 登录入口文件
        'register': './src/register.js',// 注册入口文件
    },

    // 输出
    output: {
        path: path.join(__dirname,'dist'),// 设置打包输出的目录(会自动创建dist目录)
        filename: './js/[name]-[hash:4].js',// 设置打包输出的文件名(针对的是根据入口打包输出的js文件)
        clean: true,// 删除上次打包生成的dist目录
    },

    // 加载器
    module: {
        rules: [
            // 添加loader配置
            {
                // 正则：匹配.css结尾的资源
                test: /\.css$/i,
                use: [
                    // "style-loader", // 通过style标签添加到页面
                    MiniCssExtractPlugin.loader,// 将提取出来的css文件引入页面
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        // postcss的配置向项
                        options: {
                          postcssOptions: {
                            plugins: [
                              ['postcss-preset-env'],// 可以解决工作中大部分css兼容问题
                            ],
                          },
                        },
                    },
                ],
            },
            {
                // 正则：匹配.less结尾的资源
                test: /\.less$/i,
                use: [
                  // "style-loader", // 通过style标签添加到页面
                  MiniCssExtractPlugin.loader,// 将提取出来的css文件引入页面
                  'css-loader',
                  {
                    loader: 'postcss-loader',
                    // postcss的配置向项
                    options: {
                      postcssOptions: {
                        plugins: [
                          ['postcss-preset-env'],// 可以解决工作中大部分css兼容问题
                        ],
                      },
                    },
                  },
                  'less-loader',
                ],
            },
            {
                // 正则：匹配图片资源
                test: /\.(png|jpe?g|gif)/i,
                type: 'asset',// 将背景图片打包到dist目录中
                generator: {
                    // 设置图片打包后在dist中的存储目录和名称
                    // [name] 占位符，使用资源原来的名称
                    // [ext] 占位符，使用资源原来的后缀名
                    // [hash:5] 占位符，使用5位哈希值作为文件名称
                    filename: './imgs/[hash:5][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        // 当图片小于10KB时，转成base64编码
                        // 优点：减少请求次数
                        // 缺点：体积会稍微变大
                        maxSize: 1024 * 10
                    }
                }
            },
            {
                // 正则：匹配字体图标资源
                test: /\.(eot|woff2?|ttf|svg)/i,
                type: 'asset',// 将字体图标资源打包到dist目录中
                generator: {
                    // 设置资源打包后在dist中的存储目录和名称
                    // [query] 占位符，使用原来的查询字符串
                    filename: './fonts/[name][ext][query]'
                }
            },
            {
                test: /\.js$/,// 需要babel编译的文件类型
                exclude: /node_modules/,// 排除需要babel编译的目录
                use: {
                    loader: 'babel-loader',
                    // options: {// 如果当前options配置项比较多，通常写在单独的配置文件中
                    //     // presets预设
                    //     // @babel/preset-env 智能预设（可以使用最新的JS语法）
                    //     presets: ['@babel/preset-env']
                    // }
                }
            },
        ]
    },

    // 插件
    plugins: [
        // 添加plugin配置
        new HtmlWebpackPlugin({
            // 以public/index.html文件作为模板打包生成一个新的html文件
            template: './public/index.html',
            // 设置打包后生成的html文件名称和目录（自动引入index-hash4.js文件）
            filename: './index.html',
            chunks: ['index'],// 设置对应关系（当前html页面使用index入口打包出来的js脚本）
            favicon: './public/favicon.ico' // 打包网页图标
        }),
        new HtmlWebpackPlugin({
            // 以public/list.html文件作为模板打包生成一个新的html文件
            template: './public/list.html',
            // 设置打包后生成的html文件名称和目录（自动引入list-hash4.js文件）
            filename: './list.html',
            chunks: ['list'],// 设置对应关系（当前html页面使用list入口打包出来的js脚本）
        }),
        new HtmlWebpackPlugin({
            // 以public/add.html文件作为模板打包生成一个新的html文件
            template: './public/add.html',
            // 设置打包后生成的html文件名称和目录（自动引入add-hash4.js文件）
            filename: './add.html',
            chunks: ['add'],// 设置对应关系（当前html页面使用add入口打包出来的js脚本）
        }),
        new HtmlWebpackPlugin({
            // 以public/login.html文件作为模板打包生成一个新的html文件
            template: './public/login.html',
            // 设置打包后生成的html文件名称和目录（自动引入login-hash4.js文件）
            filename: './login.html',
            chunks: ['login'],// 设置对应关系（当前html页面使用login入口打包出来的js脚本）
        }),
        new HtmlWebpackPlugin({
            // 以public/register.html文件作为模板打包生成一个新的html文件
            template: './public/register.html',
            // 设置打包后生成的html文件名称和目录（自动引入register-hash4.js文件）
            filename: './register.html',
            chunks: ['register'],// 设置对应关系（当前html页面使用register入口打包出来的js脚本）
        }),
        new EslintWebpackPlugin({
            // 指定检查哪个目录
            context: './src',
            // 排除哪个目录不检查
            exclude: './src/lib'
        }),
        new MiniCssExtractPlugin({
            // 设置提取出来的css文件存储目录和名称
            filename: './css/[name]-[hash:4].css'
        }),
        new CssMinimizerWebpackPlugin(),
    ],

    // 模式
    mode: 'production',// 生产模式
};
